<template>
  <div>
    <van-search
      v-model="val"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      background="#ffffff"
      @search="onSearch"
      input-align="left"
    >
      <div
        slot="action"
        @click="onSearch"
      >搜索</div>
    </van-search>
    <ul class="listWrap">
      <!-- 热门搜索 -->
      <!-- <li class="listItem">
        <h2 class="title">热门搜索</h2>
        <div class="hotWrap">
          <div
            class="hotItem"
            v-for="tmp in 15"
            :key="tmp"
          >
            <span class="txt">油卡</span>
          </div>
        </div>
      </li> -->
      <!-- 历史搜索 -->
      <li class="listItem">
        <h2 class="title">历史搜索</h2>
        <div class="hotWrap">
          <div
            class="hotItem"
            v-for="item in postHistory"
            :key="item"
          >
            <span
              class="txt"
              @click="onClick(item)"
            >{{item}}</span>
          </div>
        </div>
        <div
          class="clear"
          v-if="postHistory.length>0"
        >
          <img src="@/assets/images/clear.png">
          <span @click="clearHistory">清空</span>
        </div>
        <div
          class="alert"
          v-if="postHistory.length<1"
        >
          <p>暂无搜索记录~</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { Search, Dialog } from 'vant';
export default {
  data() {
    return {
      val: '',
      p: '', // 接收要跳转第二页面的参数
      postHistory: [], // 历史搜索
      hotList: [] // 热门搜索
    };
  },
  mounted() {
    this.getLocalStorage();
  },
  methods: {
    // 本地储存
    getLocalStorage() {
      let arr2 = [];
      if (JSON.parse(window.localStorage.getItem('localpostHistory'))) {
        arr2 = JSON.parse(window.localStorage.getItem('localpostHistory'));
      }
      this.postHistory.push(...arr2);
      console.log(this.postHistory);
    },

    // 清空
    clearHistory() {
      Dialog.confirm({
        message: '确定清空历史记录吗？'
      })
        .then(() => {
          // on confirm
          this.postHistory = [];
          window.localStorage.removeItem('localpostHistory');
        })
        .catch(() => {
          // on cancel
        });
    },

    // 点击历史搜索清单跳转
    onClick(item) {
      this.$router.push({
        path: '/searchList',
        query: { p: JSON.stringify(item) }
      });
    },

    // 搜索框
    onSearch() {
      if (this.val.trim() === '') {
        return;
      }

      if (this.postHistory.length <= 10) {
        // 如果包含相同的val
        if (this.postHistory.includes(this.val)) {
          const index = this.postHistory.indexOf(this.val);
          this.postHistory.splice(index, 1); // 从index下标开始，删除1个
          this.postHistory.push(this.val); // 在容器尾部推入一个
        } else {
          this.postHistory.push(this.val);
        }
      } else {
        // 如果包含相同的val
        if (this.postHistory.includes(this.val)) {
          const index = this.postHistory.indexOf(this.val);
          this.postHistory.splice(index, 1); // 从index下标开始，删除1个
          this.postHistory.push(this.val);
        } else {
          this.postHistory.splice(0, 1); // 从0下标开始，删除1个
          this.postHistory.push(this.val);
        }
      }

      this.onClick(this.val); // 共用onClick的方法
      this.val = '';
      var arr = this.postHistory; // 用来装本地储存的数组
      window.localStorage.setItem('localpostHistory', JSON.stringify(arr)); // 本地储存
    }
  },
  components: {
    'van-search': Search
  }
};
</script>
<style lang="scss" scoped>
.listWrap {
  padding: 30px;
}
.listItem {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  .title {
    font-size: 30px;
    color: #0b0b0d;
    padding: 10px;
  }
  .clear {
    display: flex;
    justify-content: center;
    margin: 30px;
    img {
      width: 25px;
      height: 31px;
      margin-right: 15px;
    }
  }
  .alert {
    text-align: center;
    padding: 120px 0;
    font-size: 25px;
  }
}
.hotWrap {
  display: flex;
  flex-direction: row;
  // justify-content: center;
  flex-wrap: wrap;
}
.hotItem {
  // width: 117px;
  height: 65px;
  border-radius: 8px;
  border: solid 1px #747474;
  font-size: 28px;
  color: #3b3b3b;
  margin: 10px;
  display: flex;
  // justify-content: center;
  justify-content: flex-start;

  .txt {
    line-height: 65px;
    padding: 0 10px;
    // margin: 0 10px;
  }
}
</style>
